import { Story, Canvas } from '@storybook/addon-docs';

# Pagination Component Options

`paginationComponentOptions`allow you to provide options to the built-in in Pagination component.

| Property              | Type    | Description                                           |
| --------------------- | ------- | ----------------------------------------------------- |
| noRowsPerPage         | boolean | hide the rows per page dropdown                       |
| rowsPerPageText       | string  | change the rows per page text                         |
| rangeSeparatorText    | string  | change the seperator text e.g. 1 - 10 'of' 100 rows   |
| selectAllRowsItem     | boolean | show 'All' as an option in the rows per page dropdown |
| selectAllRowsItemText | string  | change the rows per page text                         |

```js
const paginationComponentOptions = {
	rowsPerPageText: 'Filas por página',
	rangeSeparatorText: 'de',
	selectAllRowsItem: true,
	selectAllRowsItemText: 'Todos',
};

function MyComponent() {
	return <DataTable columns={columns} data={data} pagination paginationComponentOptions={paginationComponentOptions} />;
}
```

## Custom Pagination Component `paginationComponentOptions`

When using `paginationComponent` the `paginationComponentOptions` above become irrelevent. Instead, `paginationComponentOptions` can be used to pass whatever options you need to your custom Pagination component

<Canvas>
	<Story id="pagination-options--options" />
</Canvas>
